<template>
    <div>
        <div class="table-header">
            <el-button type="primary" :icon="Plus" @click="showAddDialogHandler()">添加
            </el-button>
        </div>
        <el-table class="goods-table" border :data="goodsdata" v-loading="loadding" table-layout="auto">
            <el-table-column prop="id" label="编号" align="center" width="200px"></el-table-column>
            <el-table-column label="样图" width="150" align="center">
                <template #default="scope" prop="cover">
                    <div style="display: flex;justify-content: center">
                        <el-image :src="scope.row.cover"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center" width="200px"></el-table-column>
            <el-table-column prop="description" label="介绍" align="center"></el-table-column>
            <el-table-column prop="price" label="单价" align="center" width="200px"></el-table-column>
            <el-table-column prop="num" label="库存" align="center" width="200px"></el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template #default="scope">
                    <div>
                        <el-button type="primary" :icon="Edit" @click="showUpdateFormDialog(scope.row)">编辑</el-button>
                        <el-popconfirm
                                @onConfirm="deleteGoodsHandler(scope.row.id)"
                                title="你真的确定要删除这条该死的数据吗？"
                        >
                            <el-button type="danger" :icon="Delete">删除</el-button>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <BaseFormDialog :title="dialogConfig.isAdd ? `添加商品`:`修改商品`" :visible.sync="dialogConfig.visable"
                        @DialogVisibleListener="DialogVisibleListenerHandler"
                        @SureFormDialog="SureFormDialogHandler"
                        @CancelFormDialog="CancelFormDialogHandler"
        >
            <template #FormContent>
                <el-form ref="ruleFormRef" class="login-form" autocomplete="on"
                         :model="addGoodsData"
                         :rules="addGoodsRules"
                         label-position="top" status-icon>
                    <el-form-item prop="cover">
                        <el-upload
                                name="file"
                                method="post"
                                class="avatar-uploader"
                                action="http://127.0.0.1:8080/api/common/uploud/avatar"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                        >
                            <el-image v-if="addGoodsData.cover" :src="addGoodsData.cover" class="avatar" alt=""/>
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item property="name" label="食品">
                        <el-input placeholder="请输入食品名称" v-model="addGoodsData.name" name="name"/>
                    </el-form-item>
                    <el-form-item property="typeId" label="食品分类" class="food-type">
                        <el-select v-model="addGoodsData.typeId" clearable placeholder="食品分类">
                            <div @click="selectGoodsTypeHandler">
                                <el-option
                                        v-for="item in goodsTypeData"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"

                                />
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input placeholder="请输入商品描述" v-model="addGoodsData.description" name="userName"
                                  type="text"/>
                    </el-form-item>
                    <el-form-item label="单价" prop="price">
                        <el-input placeholder="请输入单价" v-model="addGoodsData.price" name="password"/>
                    </el-form-item>
                    <el-form-item label="库存" prop="num">
                        <el-input placeholder="请输入库存数量" v-model="addGoodsData.num" name="phone" type="text"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input placeholder="请输入备注" v-model="addGoodsData.remark" name="address" type="text"/>
                    </el-form-item>
                </el-form>
            </template>
        </BaseFormDialog>
        <div class="pagination-container">
            <Pagination
                    layout="prev, pager, next"
                    :total="PaginationConfig.total"
                    :page-size="PaginationConfig.pageSize"
                    :page-num="PaginationConfig.pageNum"
                    @pagination="UpdatePage"></Pagination>
        </div>
    </div>
</template>

<script setup>
import Pagination from '@/components/Pagination/index.vue'
import {onMounted, onUpdated, reactive, ref} from "vue";
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {addGoods, getGoods, getGoodsType, removeGoods, updateGoods} from "@/api/Goods";
import BaseFormDialog from "@/components/BaseFormDialog/Index.vue"
import store from "@/store/Index";
import {addGoodsRules} from "@/rules/GoodsRules";
import {ElMessage} from "element-plus";
import {CopyObjectValue, SetObjectPropertyNormal} from "@/utils/TransferAttr"

const ruleFormRef = ref();
const loadding = ref(true);
const goodsdata = ref([]);
const goodsTypeData = ref([]);
const PaginationConfig = reactive({
    pageNum: 1,
    pageSize: 4,
    total: 0,
    businessId: store.getters["business/getUserInfo"].id
})
const addGoodsData = reactive({
    name: '',
    description: '',
    businessesId: '',
    price: '',
    cover: '',
    typeId: '',
    num: '',
    remark: ''
})
const dialogConfig = reactive({
    isAdd: true,
    visable: false
})
onMounted(() => {
    GetGoodsListHandler();
    selectGoodsTypeHandler();
})

onUpdated(() => {
    selectGoodsTypeHandler();
})

function selectGoodsTypeHandler() {
    getGoodsType(store.getters["business/getUserInfo"].id).then((response) => {
        goodsTypeData.value = response.rows;
    })
}

function GetGoodsListHandler() {
    getGoods(PaginationConfig).then((response) => {
        goodsdata.value = response.data.rows;
        PaginationConfig.total = response.data.total;
        loadding.value = false;
    })
}

function SureFormDialogHandler() {
    if (dialogConfig.isAdd) {
        addFood()
    } else {
        updateFood();
    }
}

function showUpdateFormDialog(data) {
    dialogConfig.isAdd = false
    dialogConfig.visable = true;
    CopyObjectValue(data, addGoodsData)
}

function showAddDialogHandler() {
    dialogConfig.isAdd = true;
    dialogConfig.visable = true;
    SetObjectPropertyNormal(addGoodsData)
}

function deleteGoodsHandler(id) {
    removeGoods(id).then((response) => {
        ElMessage({
            message: '删除成功',
            type: 'success'
        })
    })
}

function addFood() {
    addGoodsData.businessesId = store.getters["business/getUserInfo"].id;
    addGoods(addGoodsData).then((response) => {
        ElMessage({
            message: '新增成功',
            type: 'success'
        })
        GetGoodsListHandler();
    })
}

function CancelFormDialogHandler() {
    dialogConfig.visable = false;
}

function updateFood() {
    addGoodsData.businessesId = store.getters["business/getUserInfo"].id;
    updateGoods(addGoodsData).then((response) => {
        ElMessage({
            message: '修改成功',
            type: 'success'
        })
        GetGoodsListHandler();
    })
}

function UpdatePage(args) {
    loadding.value = true
    PaginationConfig.pageNum = args.page;
    GetGoodsListHandler();
}

function handleAvatarSuccess(response, uploadFile) {
    addGoodsData.cover = response.data;
}

function DialogVisibleListenerHandler(val) {
    dialogConfig.visable = val;
}


</script>

<style scoped>
.table-header {
    display: flex;
    justify-content: right;
    padding-bottom: 20px;
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.goods-table {
    justify-content: center;
}

:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
}

:deep(.el-form-item__content) {
    justify-content: center;
}

:deep(.avatar) {
    width: 600px;
    height: 150px;
    border-radius: 8px;

}

:deep(.el-upload) {
    border: 2px solid #d9d9d9;
    width: 600px;
    height: 150px;
    border-radius: 8px;
}

.food-type :deep(.el-form-item__content) {
    justify-content: left;
}
</style>